<template>
  <div class="coupon-item w-full p-30rpx flex-column bg-white rounded-xl">
    <div class="w-full flex items-center">
      <div
        class="w-80rpx h-80rpx flex-shrink-0 rounded-lg overflow-hidden bg-hex-f1f1f1" @click="imageShow = true"
      >
        <image class="wh-full" :src="props.couponInfo?.cover ?? ''" mode="aspectFill" />
      </div>
      <div class="ml-20rpx text-30rpx truncate">
        {{ props.couponInfo?.couponName ?? "" }}
      </div>
      <div class="ml-auto flex-shrink-0 flex-column flex-center">
        <div class="text-primary text-32rpx font-bold">
          {{ formatPrice(props.couponInfo?.needPay ?? "") ?? "— —" }}
        </div>
      </div>
    </div>
    <div
      class="w-full mt-30rpx pt-30rpx flex-column text-26rpx border-0 border-t-2rpx border-solid border-hex-f1f1f1"
    >
      <div class="flex mb-20rpx">
        <div class="flex-shrink-0">发放数量：</div>
        <div>{{ props.couponInfo?.quota ?? "-" }}</div>
      </div>
      <div class="flex mb-20rpx">
        <div class="flex-shrink-0">发放开始日期：</div>
        <div>
          {{
            formatDateTime(props.couponInfo?.quotaStartTime ?? "", "yy-mm-dd hh:mm:ss")
          }}
        </div>
      </div>
      <div class="flex mb-20rpx">
        <div class="flex-shrink-0">发放结束日期：</div>
        <div>
          {{ formatDateTime(props.couponInfo?.quotaEndTime ?? "", "yy-mm-dd hh:mm:ss") }}
        </div>
      </div>
      <div class="flex mb-20rpx">
        <div class="flex-shrink-0">核销开始日期：</div>
        <div>
          {{
            formatDateTime(props.couponInfo?.validStartTime ?? "", "yy-mm-dd hh:mm:ss")
          }}
        </div>
      </div>
      <div class="flex mb-20rpx">
        <div class="flex-shrink-0">核销结束日期：</div>
        <div>
          {{ formatDateTime(props.couponInfo?.validEndTime ?? "", "yy-mm-dd hh:mm:ss") }}
        </div>
      </div>
      <div class="flex mb-20rpx">
        <div class="flex-shrink-0">剩余数量：</div>
        <div>{{ (props.couponInfo?.quota ?? 0) - (props.couponInfo?.takeCount ?? 0) }}</div>
      </div>
      <div class="flex mb-20rpx" style="color: #fa3534">
        <div class="flex-shrink-0">已下单未使用数量：</div>
        <div>
          {{ (props.couponInfo?.takeCount ?? 0) - (props.couponInfo?.usedCount ?? 0) }}
        </div>
      </div>
      <div class="flex" style="color: #19be6b">
        <div class="flex-shrink-0">已使用数量：</div>
        <div>{{ props.couponInfo?.usedCount ?? 0 }}</div>
      </div>
    </div>
    <u-mask :show="imageShow" @click="imageShow = false">
      <div class="wh-full warp">
        <image class="w-full" :src="props.couponInfo?.cover ?? ''" mode="widthFix" />
      </div>
    </u-mask>
  </div>
</template>
  
  <script setup lang="ts">
import { StoreCouponVo } from "@/service/api/modules/store/response";
import {
  formatDateTime,
  formatPrice,
  formatContactName,
} from "@/common/filters";

interface CouponItemProps {
  couponInfo: StoreCouponVo;
  customBtnFunc?: Function | null;
  btnText?: string;
}

const props = defineProps<CouponItemProps>();

// 是否显示更多
const showMore = ref(false);
const imageShow = ref(false);

const handlecouponClick = () => {
  !showMore.value && changeShowMoreStatus();
};

const changeShowMoreStatus = () => {
  showMore.value = !showMore.value;
};


// 点击按钮
const handleOrderBtn = (data: StoreCouponVo) => {
  if (typeof props.customBtnFunc === "function") {
    props.customBtnFunc(data);
  } else {
    handlecouponClick();
  }
};

</script>
  
  <style scoped lang="scss">
.warp {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
</style>
  